<template>
	<view>
		<view class="search_box" v-if="type==='search'">
			<view class="iconfont iconjinru left" @click="handleToBack()"></view>
			<view class="input_box">
				<view class="iconfont iconsousuokuang icon" style="font-size:32rpx"></view>
				<input type="text" value="" placeholder="请输入搜索内容" v-model="inputValue"/>
			</view>
			<view class="search_text" @click="handleSearch">搜索</view>
		</view>
		<!-- #ifdef H5 -->
		<uni-nav-bar left-icon="back" :title="myTitle" @clickLeft="handleToBack" v-if="type!=='search' && isHide"></uni-nav-bar>
		<!-- <view class="separation-line" @click="handleToBack"></view> -->
		<!-- #endif -->
		<uni-swipe-action v-for="(item,index) in data" v-if="type==='fava'">
			<uni-swipe-action-item :options="options" @click="bindClick($event,item)">
				<VideoList :item="item"></VideoList>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<VideoList :item="item" v-for="(item,index) in data" v-if="type==='category'||type==='video'||type==='search'" :type="type"
			@deteleVideo="deteleVideo" />
		<UserList v-for="(item,index) in data" :item="item" v-if="type==='fens'||type==='follow'"></UserList>
		<view class="text" v-if="data.length===0" style="margin-top: 100rpx;font-size: 34rpx;">暂无数据</view>
		<view v-if="data.length > 10" class="text" style="margin-top: 10rpx;" hover-class="bg-light">
			{{ loadText }}
		</view>
	</view>
</template>

<script>
	import VideoList from '@/components/common/video-list.vue'
	import uniSwipeAction from '@/components/uni-ui/uni-swipe-action/uni-swipe-action.vue';
	import uniSwipeActionItem from '@/components/uni-ui/uni-swipe-action-item/uni-swipe-action-item.vue';
	import UserList from '@/components/common/user-list.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			VideoList,
			uniSwipeAction,
			uniSwipeActionItem,
			UserList,
			uniNavBar
		},
		data() {
			return {
				inputValue:'',
				myTitle: '',
				isHide: true,
				options: [{
					text: '取消收藏',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}],
				id: '',
				page: 1,
				data: [],
				loadText: "上拉加载更多",
				type: '',
				url: {
					category: '/category/',
					fava: '/fava_list/',
					fens: '/user/fens/',
					follow: '/user/follows/',
					video: '/video_list/',
					search:'/video_search/'
				},
				parameter: {
					token: true,
					noJump: false,
					toast: true,
				},
				title: {
					fava: '我的收藏',
					fens: '我的粉丝',
					follow: '我的关注',
					history: '我的历史',
					video: '我的作品'
				},
				user_id:'',
			}
		},
		methods: {
			handleSearch(){
				this.getData()
			},
			deteleVideo(id) {
				uni.showModal({
					title: '是否删除该作品',
					success: () => {
						this.$H.del(`/video/${id}`, {}, {
							token: true,
							noJump: false,
							toast: true,
						}).then(res => {
							uni.showToast({
								title: '删除成功'
							})
							this.getData()
						})
					}
				})
			},
			handleToBack() {
				uni.navigateBack({
					delta:1
				})
				// uni.reLaunch({
				// 	url: '/pages/cate/cate'
				// })
			},
			judge(res) {
				if (this.page === 1) {
					this.data = res
				} else {
					this.data = [...this.data, ...res]
				}
				this.loadText = res.length === 10 ? '上拉加载更多' : '没有更多了'
			},
			getData() {
				if (this.type === 'category') {
					this.$H.get(`${this.url[this.type]}${this.id}/video/${this.page}`).then(res => {
						console.log(res)
						this.judge(res)
					})
				} else if(this.type==='search'){
					this.$H.get(`${this.url[this.type]}${this.page}?keyword=${this.inputValue}`).then(res => {
						console.log(res)
						this.judge(res)
					})
				}else {
					this.$H.get(`${this.url[this.type]}${this.page}?user_id=${this.user_id}`, ).then(res => {
						console.log(res)
						this.judge(res)
					})
				}
			}
		},
		onLoad(e) {
			if(e.user_id){
				this.user_id=e.user_id
			}
			this.type = e.type;
			if(this.type==='search'){
				return
			}
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.isHide = false
				if (e.type === 'category') {
					this.id = parseInt(e.id)
					uni.setNavigationBarTitle({
						title: e.title
					})
				} else {
					uni.setNavigationBarTitle({
						title: this.title[this.type]
					})
				}
				
			} else {
				if (e.type === 'category') {
					this.id = parseInt(e.id)
					this.myTitle = e.title
				} else {
					this.myTitle = this.title[this.type]
				}
			}
			// #endif
			// #ifndef H5
			if (e.type === 'category') {
				this.id = parseInt(e.id)
				uni.setNavigationBarTitle({
					title: e.title
				})
			} else {
				uni.setNavigationBarTitle({
					title: this.title[this.type]
				})
			}
			// #endif
			this.getData();
			console.log(this.isHide)

		},
		
		onPullDownRefresh() {
			this.page = 1
			this.getData()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.loadText === '没有更多了') {
				return
			}
			if (this.loadText === '正在加载中...') {
				return
			}
			this.loadText = '正在加载中...'
			this.page = this.page + 1
			console.log(this.page)
			this.getData()
		}

	}
</script>

<style lang="scss" scoped>
		
	.search_box{
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		.left{
			font-size: 36rpx;
			margin-right: 20rpx;
			transform: rotate(180deg);
		}
		.input_box{
			position: relative;
			flex: 1;
			input{
				padding: 0 40rpx 0 70rpx;
				height: 60rpx;
				background-color: #f6f7f8;
				border-radius: 30rpx;
			}
			.icon{
				font-size: 36rpx !important;
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.search_text{
			margin-left: 20rpx;
			
		}
	}
	.uni-navbar--border {
		border: none !important;
	}

	.nav {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-weight: 700;
		font-size: 32rpx;
	}

	.text {

		text-align: center;
		color: #6c757d;
	}
</style>
